<template>
  <div>
     <div class="father" >
       <div class="box" :class="{active:id ===1}" @click="id =1">1</div>
       <div class="box" :class="{active:id ===2}" @click="id =2">2</div>
       <div class="box" :class="{active:id ===3}" @click="id =3">3</div>
     </div>
   </div>
</template>

<script>
export default {
  data(){
    return {
      id: 1
    }
  }
}
</script>

<style scoped>
     .box {
        border: 1px solid #333;
        width: 250px;
        height: 250px;
     }
     .father {
       display: flex;
     }
      .active {
        background-color: #087;
     }
</style>